<template>
  <view class="su-menu-group">
    <view class="su-menu-group__header" v-if="!hideHeader">
      <view class="su-menu-group__header-left">
        {{title}}
      </view>
      <view class="su-menu-group__header-right">
        <slot name="header-right"></slot>
      </view>
    </view>
    <view class="su-menu-group__body">
      <slot></slot>
    </view>
  </view>
</template>

<script>
  /**
   * @description 菜单组
   * @date 2022-03-27
   * @version v1.0.1
   * @author gf
   */
  export default {
    name: "su-menu-group",
    props: {
      hideHeader:{
        type:Boolean,
        default:false
      },
      title: {
        type: String,
        default: '标题'
      }
    },
    data() {
      return {
      }
    }
  }
</script>

<style lang="scss">
  .su-menu-group{
    background-color: #fff;
    margin-bottom: 20upx;
    padding-bottom: 20upx;
    padding-left: 8upx;
    padding-right: 8upx;
    &__header{
      height: 80upx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 20upx;
      &-left{
        font-size: 30upx;
        color: #333;
        font-weight: bold;
      }
    }
  }
</style>
